<template>
    <div class="comment-content">
        <img src="./person.png" alt="" class="l">
        <div class="comment-center l">
            <p class="name">肖申克</p>
            <div class="texts">
                老师讲的非常好，感恩老师！读完以后满满
的正量。老师讲的非常好，感恩老师！读完以后满满
的正量。
            </div>
            <p class="time">
                <span class="spans">2017-08-10</span>
                <span class="spans">回复</span>
            </p>
            <!-- 回复盒子 -->
            <div class="reply">
                <p>
                    <span class="span-cc">王欣然</span>
                    <span>回复</span>
                    <span class="span-cc">黄小丫</span>
                    <span class="spanc">下次一起去参加老师的面授班。</span>
                </p>
            </div>
        </div>
        <a href="###" class="r" @click="Addto(fabulous,'iconFabulous')">
            {{count}}
            <collection :cls="fabulous"></collection>
        </a>
    </div>
</template>

<script>
import collection from 'base/collection/collection'

export default {
    data(){
        return {
            fabulous:{
                a:'icon-icon_good',
                b:'icon-zan',
                iconState:false
            },
            count:520
        }
    },
    components:{
        collection
    },
    methods:{
        // Addto(定义的对象，标识符)
        Addto(icon,k){
            console.log(icon,k)
            icon.iconState = !icon.iconState
            //点赞
            if(k=='iconFabulous' && icon.iconState){
                console.log("赞")
                this.count++
            }else if(k=='iconFabulous' && !icon.iconState){
                console.log("取消赞")
                this.count--
            }
        },
    }
}
</script>

<style lang="stylus">
@import "../../common/stylus/mixin.styl"

.comment-content
    position relative
    display:flex;
    padding-bottom:20px;
    margin-bottom:20px;
    border-1px(#ededed)
    img.l
        width:32px;
        height:32px;
        border-radius:100%;
        overflow hidden; 
        flex:0 0 32px;
    a.r
        color:#999;
        position absolute
        top:0px;
        right:0px;
        display:block;
        text-align:right;
    .comment-center
        width:80%;
        word-wrap:break-word
        padding-left:10px;
        text-align:left;
        flex:1;
        .name
            color:#666;
        .texts
            color:#333;
            text-align:justify;
            padding-right:15px;
            line-height:19px;
            margin-top:6px;
        .time
            margin:5px 0px;
            .spans
                color:#999
                font-size:12px;
                margin-right:14px;
        .reply
            p
                display:flex;
                span 
                    margin-right:10px;
                .spanc
                    flex:1; 
                .span-cc
                    color:#999
</style>

